<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../css/personimfcss/touxiang.css">
        <script src="D:\蓝桥项目\红色论坛\jquery-3.6.0.js"></script>
        <script>
                function ProcessFile(e) {
                    var file = document.getElementById('chooseImage0').files[0];
                    console.log(file);
                    var reader = new FileReader();
                    if (file) {
                        reader.onload = function (event) {
                            var txt = event.target.result;
                            $("#cropedBigImg0").attr('src', txt);

                        };
                    }
                    reader.readAsDataURL(file);
                }

                function contentLoaded() {
                    document.getElementById('chooseImage0').addEventListener('change',
                        ProcessFile, false);
                }
                window.addEventListener("DOMContentLoaded", contentLoaded, false);

        </script>
    </head>
    <body>
        <div class="zong">
            <div class="header">
                <h4>当前我的头像</h4>
                <p>如果您还没有设置自己的头像，系统会显示为默认头像，您需要自己上传一张新照片来作为自己的个人头像</p>
                <div class="touxaing">
                    <img src="../../images/personmes/touxiang.png" alt="" id="touxiang1">
                </div>

            </div>
            <div class="main">
                <h4>设置我的新头像</h4>
                <p>请选择一个新照片进行上传编辑。</p>
                <p>头像保存后，您可能需要刷新一下本页面(按F5键)，才能查看最新的头像效果</p>
                <div class="newtouxiang">
                    <div class="div_model">
                        <img id="cropedBigImg0" src="../../images/personmes/touxiang.png" class="div_model_img"/>
                        <form action="">
                        <input type="file" class="file" accept="image/gif,image/jpeg, image/png, image/jpg" id="chooseImage0" value="上传头像"><br>
                        <input type="submit" value="确认修改" id="queren">
                        </form>
                     </div>
                </div>
                 
            </div>
        </div>
    </body>
</html>